<template>
  <div>
    <div class="sideBar">
      <!-- <li class="itemlists"> -->
      <van-icon
        class="leftItem"
        v-for="(item, index) in rightLists"
        :key="index"
        :name="item.img"
        :title="item.name"
        v-on:click="clickFire(item, index)"
      />
      <!-- </li> -->
    </div>
    <div class="sideBarRight">
      <van-icon
        class="rightItem"
        v-for="(item, index) in leftLists"
        :key="index"
        :name="item.img"
        v-on:click="clickRightIcons(item, index)"
      />
    </div>
  </div>
</template>
<script>
import * as MapConfig from '../utils/mapConfig'
import * as SERVICE from '../utils/service'
import { fromLonLat } from 'ol/proj'
import Feature from 'ol/Feature'
import { Point } from 'ol/geom'
import * as extent from 'ol/extent'
import gcoord from 'gcoord'
import { Notify } from 'vant'
export default {
  data() {
    return {
      //左侧按钮列表
      leftLists: [
        {
          name: '图层',
          img: require('../../static/imgs/layers.png'),
        },
        {
          name: '定位',
          img: require('../../static/imgs/location.png'),
        },
        {
          name: '移除',
          img: require('../../static/imgs/remove.png'),
        },
      ],
      //右侧按钮列表
      rightLists: [
        {
          name: '购物',
          img: require('../../static/imgs/market.png'),
        },
        {
          name: '医院',
          img: require('../../static/imgs/hospital.png'),
        },
        {
          name: '公园',
          img: require('../../static/imgs/garden.png'),
        },
        // {
        //   name: '出行',
        //   img: require('../../static/imgs/taxi.png'),
        // },
        {
          name: '报警',
          img: require('../../static/imgs/warning.png'),
        },
      ],
    }
  },
  methods: {
    /*左边工具点击事件 */
    clickRightIcons(item, index) {
      // console.log(item)
      switch (item.name) {
        case '图层': {
          let layers = MapConfig.staticParam.olmap.getLayers().array_ //获取图层集合
          // console.log(MapConfig.staticParam.olmap.getLayers().array_)
          //修改显隐
          let visible_1 = layers[0].values_.visible
          let visible_2 = layers[1].values_.visible
          MapConfig.staticParam.olmap.getLayers().array_[0].values_.visible = !visible_1
          MapConfig.staticParam.olmap.getLayers().array_[1].values_.visible = !visible_2
          break
        }
        case '定位': {
          console.log('导航定位')
          // navigator.geolocation.watchPosition(
          //   (position) => {
          //     console.log(position)
          //     let lng = position.coords.longitude
          //     let lat = position.coords.latitude
          //   },
          //   (error) => {}
          // )

          navigator.geolocation.getCurrentPosition(
            function (position) {
              //获取当前经纬度信息-HTML5的地理定位返回的应该都是GPS坐标，即WGS-84坐标
              Notify({ type: 'success', message: '正在获取当前位置...' })
              let posCoord = position.coords

              //记录经纬度值
              let lnglat = [posCoord.longitude, posCoord.latitude]
              MapConfig.staticParam.olmap.getView().setZoom(17)
              MapConfig.staticParam.olmap.getView().setCenter(
                fromLonLat(
                  gcoord.transform(lnglat, gcoord.WGS1984, gcoord.GCJ02)
                  // lnglat
                )
              )
              let tempLayer = MapConfig.createMarker(
                gcoord.transform(lnglat, gcoord.WGS1984, gcoord.GCJ02)
              )
              setTimeout(() => {
                MapConfig.staticParam.olmap.removeLayer(tempLayer)
                // console.log(MapConfig.staticParam.olmap.getLayers())
              }, 5000)
            },
            function (error) {
              console.log('error')
              Notify({ type: 'error', message: '定位失败...' })
            }
          )
          break
        }
        case '移除': {
          console.log('移除')
          //移除临时图层
          console.log(MapConfig.staticParam.olmap)
          for (let i = 0; i < MapConfig.staticParam.tempLayers.length; i++) {
            MapConfig.staticParam.olmap.removeLayer(
              MapConfig.staticParam.tempLayers[i]
            )
          }
        }
      }
    },
    /**右边工具点击事件 */
    clickFire(item, index) {
      console.log(MapConfig.staticParam.layers)
      // this.$store.dispatch('setShowPopUp', true)
      //根据图标名称判断功能逻辑
      switch (item.name) {
        case '购物': {
          console.log('显示购物点')
          MapConfig.setLayerVisibleByClassName('supermarket-layer', true)
          this.$store.dispatch('setItemAttr', '购物')
          break
        }
        case '医院': {
          console.log('显示医院点')
          MapConfig.setLayerVisibleByClassName('hospital-layer', true)
          this.$store.dispatch('setItemAttr', '医院')
          break
        }
        case '公园': {
          MapConfig.setLayerVisibleByClassName('scenery-layer', true)
          this.$store.dispatch('setItemAttr', '公园')
          console.log('显示公园点')
          break
        }
        // case '出行': {
        //   console.log('显示出行点')
        //   break
        // }
        case '报警': {
          console.log('显示报警点')
          MapConfig.setLayerVisibleByClassName()
          //获取当前位置，
          navigator.geolocation.getCurrentPosition(
            (pos) => {
              let lng = pos.coords.longitude, //经度
                lat = pos.coords.latitude //纬度
              let idnum = JSON.parse(localStorage.getItem('userinfo')).idNum //身份证号
              // 发送报警信息
              console.log(lng, lat, idnum)
              SERVICE.sendWebSocketMsg(idnum, lng, lat).then((res) => {
                console.log(res)
              })
            },
            (err) => {
              console.log(err)
            }
          )
          break
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.sideBar {
  position: fixed;
  right: 20px;
  top: 70px;
  z-index: 5;
  .leftItem {
    display: inherit;
    margin-top: 20px;
    padding: 5px;
    border-radius: 90px;
    border: 1px solid #a3cf62;
    background-color: PaleGreen;
  }
}
.sideBarRight {
  position: fixed;
  left: 20px;
  top: 70px;
  z-index: inherit;
  .rightItem {
    display: inherit;
    margin-top: 20px;
    padding: 5px;
    border-radius: 90px;
    border: 1px solid #a3cf62;
    background-color: MintCream;
  }
}
</style>
